<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
	<script type="text/javascript">
	Ext.onReady(function() {
		
		var myData = [
			['Apple',29.89,0.24,0.81,'9/1 12:00am'],
			['Ext',83.81,0.28,0.34,'9/12 12:00am'],
			['Google',71.72,0.02,0.03,'10/1 12:00am'],
			['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
			['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
		];
	 
		var myReader = new Ext.data.ArrayReader({}, [
			{name: 'company'},
			{name: 'price', type: 'float'},
			{name: 'change', type: 'float'},
			{name: 'pctChange', type: 'float'},
			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
		]);
	 
		var grid = new Ext.grid.GridPanel({
			store: new Ext.data.Store({
				data: myData,
				reader: myReader
			}),
			columns: [
				{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
				{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
				{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
				{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
				{header: 'Last Updated', width: 120, sortable: true, 
					renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
		                        dataIndex: 'lastChange'}
			],
			viewConfig: {
				forceFit: true
			},
			renderTo: 'content',
			title: 'My First Grid',
			width: 500,
			autoHeight: true,
			frame: true
		});
	 
		grid.getSelectionModel().selectFirstRow();
		
		// der Button
		Ext.get('okButton').on('click', function(){
			var msg = Ext.get('msg');
			msg.load({
				url: 'client/test', 
				params: 'name=' + Ext.get('name').dom.value,
				text: 'Updating...'
			});
			msg.show();
		});

		var test = new Ext.Panel({
			//renderTo: 'test', // test ist der Name eines divs
			frame:true,
			width: '200px',
			title: 'My Title',
			html: 'My HTML content',
			collapsible: true
		});


		var win = new Ext.Window({
	        layout:'fit',
	        title: 'HUHU',
	        x:0,
	        width:300,
	        height:150,
	        closable: false,
	        resizable: false,
	        plain: true,
	        border: false,
	        items: [test]
		});
		win.show();

		new Ext.Button({
	        text: 'Logout',
	        handler: logout,
	        iconCls:'new-tab',
	        renderTo:'divLogout'
	    });
		
		var tabs = new Ext.TabPanel({
		    //renderTo: Ext.getBody(),
		    renderTo: 'tabControlDiv',
		    activeTab: 0,
		    items: [{
		        title: 'Tab 1',
		        html: 'A simple tab'
		    },{
		        title: 'Tab 2',
		        html: 'Another one'
		    }]
		});
	});

	function logout()
	{
		Ext.Ajax.request({
			url : 'client/logout' , 
			params : { action : 'getDate' },
			method: 'GET',
			success: function ( result, request ) { 
				Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 
			},
			failure: function ( result, request) { 
				Ext.MessageBox.alert('Failed', result.responseText); 
			} 
		});
	}
	</script>	
</head>
<body>
    <div id="content">

    	<div id="myDiv" />
		<div id="name" value="hula" />
    	<input type="button" id="okButton" value="My Button" />
        <div id="msg"></div>
        <div id="divLogout" />
        <div id="tabControlDiv"></div>
	</div>
</body>
</html>